<template>
<a-layout style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed" collapsible>
      <div class="logo" />
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
        <template v-for="route in routes" :key="route.key">
        <a-sub-menu v-if="route.children" :key="route.key">
          <template #title >
            <component :is="route.icon" />
            {{ route.name }}
          </template>
          <a-menu-item v-for="child in route.children" :key="child.key" @click="handleClick(route.key, child.path, route)">
            {{ child.name }}
          </a-menu-item>
        </a-sub-menu>
        <a-menu-item v-else :key="route.key" @click="handleClick(route.key, route.path, route)">
          {{ route.name }}
        </a-menu-item>
      </template>
        <!-- <a-menu-item key="1">
          <pie-chart-outlined />
          <span>工作台</span>
        </a-menu-item>
        <a-sub-menu key="sub1">
          <template #title>
            <span>
              <user-outlined />
              <span>订单管理</span>
            </span>
          </template>
          <a-menu-item key="sales">销售管理</a-menu-item>
          <a-menu-item key="afterSales">售后管理</a-menu-item>
          <a-menu-item key="reservation">预约管理</a-menu-item>
        </a-sub-menu>
        <a-sub-menu key="sub2">
          <template #title>
            <span>
              <team-outlined />
              <span>系统设置</span>
            </span>
          </template>
          <a-menu-item key="user">会员管理</a-menu-item>
          <a-menu-item key="admin">权限管理</a-menu-item>
        </a-sub-menu> -->
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0" >
        <Header />
      </a-layout-header>
      <a-layout-content style="margin: 0 16px" class='content'>
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item v-for="(item, index) in items" :key="index">{{item}}</a-breadcrumb-item>
        </a-breadcrumb>
        <div class='body' :style="{ padding: '24px', background: '#fff', minHeight: '360px',flex: 1 }">
          <router-view v-if="isRouterActive" />
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center;padding: 10px 24px;">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<style scoped>
#components-layout-demo-side .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
  background: #fff;
}
[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}
</style>
<script setup lang='ts'>
import {
  PieChartOutlined,
  DesktopOutlined,
  UserOutlined,
  TeamOutlined,
  FileOutlined,
  HomeFilled
} from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { nextTick, ref, h } from 'vue';
import Header from './Header.vue'
const collapsed = ref<boolean>(false);
const selectedKeys = ref<string[]>(['work']);
const items = ref<string[]>(['首页']);
import './app.css'
 
const router = useRouter();

const routes = [
  {
    key: 'work',
    path: '/home',
    name: '工作台',
    icon: HomeFilled 
  },
  {
    key: 'order',
    name: '订单管理',
    children: [
      {
        key: 'sales',
        name: '销售管理',
        path: '/sales'
      },
      {
        key: 'afterSales',
        name: '售后管理',
        path: '/afterSales'
      },
      {
        key: 'reservation',
        name: '预约管理',
        path: '/reservation'
      },
    ]
  },
  {
    key: 'warehouse',
    name: '仓储管理',
    children: [
      {
        key: 'inthouse',
        name: '入库管理',
        path: '/inthouse'
      },
      {
        key: 'outhouse',
        name: '出库管理',
        path: '/outhouse'
      }
    ]
  },
  {
    key: 'purchars',
    name: '采购管理',
    children: [
      {
        key: 'purchasing',
        name: '采购单管理',
        path: '/purchasing'
      },
      {
        key: 'outhouse',
        name: '出库管理',
        path: '/outhouse'
      }
    ]
  },
  {
    key: 'system',
    name: '系统管理',
    children: [
      {
        key: 'shop',
        name: '店铺管理',
        path: '/shop'
      },
      {
        key: 'supplier',
        name: '供应商管理',
        path: '/supplier'
      },
      {
        key: 'staff',
        name: '员工管理',
        path: '/staff'
      },
      {
        key: 'department',
        name: '部门管理',
        path: '/department'
      },
      {
        key: 'customer',
        name: '客户管理',
        path: '/customer'
      },
    ]
  },
]
const isRouterActive = ref(true);

const handleClick = (key: string, path: string, route: any) => {
  if (route.path == path) {
    items.value = [`${route.name}`]
  } else {
    const name = route.name;
    const child = route.children.filter((item:any, index:number) => path == item.path);
    items.value =[name, child[0].name]
  }
  selectedKeys.value = [key];
  router.push(path)
}
 
// // 监听路由变化，可选操作
// router.beforeEach((to, from, next) => {
//   // 可以在这里添加导航守卫逻辑
//   next();
// });
// router.afterEach(() => {
//   isRouterActive.value = false;
//   nextTick(() => {
//     isRouterActive.value = true;
//   });
// });
</script>
